<template>
  <div class="place">
    <h1>A区-6号楼-</h1>
    <ul>
      <li v-for="item,index in list" @click="choose(index)">
        <span :class="{home_nav:false,current:isShow===index}">{{item}}</span>
        <img :class="{home_nav:true,current:isShow===index}" src="../assets/ic_selected@3x.png"   alt="">
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: "Place",
      data(){
        return{
          isShow:0,
          list:[301,302,303,304,305]
        }
      },
      mounted(){
        this.$store.state.placelist = this.list;
      },
      methods:{
        choose(index){
          this.isShow = index;
          this.$store.state.index = index;
        }
      }
    }
</script>

<style scoped>
  .place h1{
    font-size:1.4rem;
    color:#4A4A4A;
    height:2rem;
    line-height:2rem;
    margin-left:5%;
  }
  .place ul{
    width:100%;
    background:#FFFFFF;
  }
  .place ul li{
    width:91%;
    margin-left:5%;
    border-bottom:1px solid #EEEEEE;
    height:4.8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
  }
  .place ul li span{
    font-size:1.4rem;
    color:#0B0B0B;
    height:4.8rem;
    line-height:4.8rem;
  }
  .place ul li img{
    width:2rem;
    height:2rem;
  }
  .home_nav{
    display:none;
  }
  .current{
    display:block;
    color:#00CCCC!important;
  }
</style>
